import React, { Component } from 'react';
import {
  Skeleton,
  Switch,
  Card,
  Icon,
  Avatar,
  Row,
  Col,
  Modal,
  Button,
  Form,
  Input,
  Select,
  message,
  Popconfirm,
} from 'antd';

import { queryProject, createProject, updateProject, deleteProject } from '@/services/project';
const { TextArea } = Input;
const { Meta } = Card;

const mockdata = [
  {
    id: 1,
    name: 'APP-ios',
    coverSrc: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
    desc: '项目1',
    status: 1,
    userNums: 1234,
    type: 'company',
    codeName: '代号',
  },
  {
    id: 2,
    name: 's',
    coverSrc: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
    desc: '项目2',
    status: 1,
    userNums: 1234,
    type: 'self',
    codeName: '代号2',
  },
  {
    id: 3,
    name: '我的应用3',
    coverSrc: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
    desc: '项目3',
    status: 1,
    userNums: 1234,
    type: 'self',
    codeName: '代号4',
  },
  {
    id: 4,
    name: '我的应用4',
    coverSrc: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
    desc: '项目4',
    status: 2,
    userNums: 1234,
    type: 'company',
    codeName: '代号7',
  },
];
@Form.create()
class ProjectPage extends Component {
  state = {
    loading: true,
    applicationData: [],
    visible: false,
    authWatch: false,
    currentPm: {},
    optionType: 'create',
    currentId: '',
  };
  componentDidMount() {
    this.initialCard();
  }
  initialCard = async () => {
    const { data } = await queryProject();
    this.setState({
      applicationData: data.list,
    });
    setTimeout(() => {
      this.setState({
        loading: false,
      });
    }, 1500);
  };
  // 弹窗确认
  handleOk = () => {
    // 根据类型分类

    this.props.form.validateFields(async (err, value) => {
      if (!err) {
        if (this.state.optionType == 'create') {
          console.log(value);
          const res = await createProject(value);
          if (res.code == 0) {
            message.success('添加成功');
            this.setState(
              {
                visible: false,
                currentPm: {},
              },
              () => {
                this.props.form.resetFields();
                this.initialCard();
              },
            );
          }
        } else {
          const _id = this.state.currentId;
          const values = { ...value, _id };
          const res = await updateProject(values);
          console.log('编辑');
          if (res.code == 0) {
            message.success('成功');
            this.setState(
              {
                visible: false,
                currentPm: {},
              },
              () => {
                this.props.form.resetFields();
                this.initialCard();
              },
            );
          }
        }
      }
    });
  };
  // 弹窗取消
  handleCancel = () => {
    this.setState({
      visible: false,
      currentPm: {},
    });
    this.props.form.resetFields();
  };
  handleDetail = item => {
    console.log(item);
    this.setState({
      visible: true,
      optionType: 'edit',
      currentPm: item,
      currentId: item._id,
    });
  };
  // 删除
  handleDelete = async () => {
    console.log('删除');
    const id = this.state.currentId;
    const res = await deleteProject({ id });
    if (res.code == 0) {
      message.success('删除完成');
      this.setState(
        {
          visible: false,
          currentPm: {},
        },
        () => {
          this.props.form.resetFields();
          this.initialCard();
        },
      );
    }
  };
  // 添加项目
  addProject = () => {
    console.log('add');
    this.setState({
      optionType: 'create',
      visible: true,
    });
  };
  render() {
    // 获取props
    const { getFieldDecorator } = this.props.form;
    const { loading, applicationData, authWatch, currentPm, optionType } = this.state;
    return (
      <div>
        {' '}
        <Row gutter={24}>
          {applicationData.map(v => {
            return (
              <Col xs={24} sm={12} md={12} lg={8} xl={8} offset={-1}>
                <Skeleton loading={loading} avatar active>
                  <Card
                    style={{ marginTop: 16 }}
                    cover={
                      <img
                        alt="example"
                        src={
                          v.coverSrc ||
                          'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png'
                        }
                      />
                    }
                    key={v._id}
                  >
                    {/**判断是否有权限看个人项目 */}
                    <Meta
                      title={v.name + '(' + v.codeName + ')'}
                      description={v.desc}
                      style={{ textAlign: 'center' }}
                      onClick={() => this.handleDetail(v)}
                    />
                  </Card>
                </Skeleton>
              </Col>
            );
          })}
          <Col xs={24} sm={12} md={12} lg={8} xl={8} offset={-1}>
            <Card style={{ marginTop: 16 }} key="add">
              {/**判断是否有权限看个人项目 */}
              <Meta
                onClick={() => this.addProject()}
                title={<Button type="default">添加</Button>}
                style={{ textAlign: 'center' }}
              />
            </Card>
          </Col>
        </Row>
        <Modal
          title="项目基本情况"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form>
            <Form.Item label="项目名称">
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                  },
                ],
                initialValue: currentPm.name,
              })(<Input placeholder="项目名称"></Input>)}
            </Form.Item>
            <Form.Item label="项目代号">
              {getFieldDecorator('codeName', {
                rules: [
                  {
                    required: true,
                  },
                ],
                initialValue: currentPm.codeName,
              })(<Input placeholder="项目代号"></Input>)}
            </Form.Item>
            <Form.Item label="项目描述">
              {getFieldDecorator('desc', {
                rules: [
                  {
                    required: true,
                  },
                ],
                initialValue: currentPm.desc,
              })(<TextArea placeholder="项目描述" rows={6}></TextArea>)}
            </Form.Item>
            <Form.Item label="项目状态">
              {getFieldDecorator('status', {
                rules: [
                  {
                    required: true,
                  },
                ],
                initialValue: currentPm.status,
              })(
                <Select>
                  <Select.Option value={1}>开发中</Select.Option>
                  <Select.Option value={2}>测试中</Select.Option>
                  <Select.Option value={3}>上线中</Select.Option>
                  <Select.Option value={4}>运行中</Select.Option>
                  <Select.Option value={5}>已失效</Select.Option>
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="项目类型">
              {getFieldDecorator('type', {
                rules: [
                  {
                    required: true,
                  },
                ],
                initialValue: currentPm.type,
              })(
                <Select>
                  <Select.Option value="company">公司项目</Select.Option>

                  <Select.Option value="self">个人项目</Select.Option>
                </Select>,
              )}
            </Form.Item>
            {optionType == 'edit' ? (
              <Popconfirm
                title="确定删除?"
                onConfirm={this.handleDelete}
                onCancel={() => {
                  console.log('删除');
                }}
                okText="Yes"
                cancelText="No"
              >
                <Button style={{ width: '100%' }} type="danger">
                  删除
                </Button>
              </Popconfirm>
            ) : null}
          </Form>
        </Modal>
      </div>
    );
  }
}
export default ProjectPage;
